<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-07 17:44:52
component:     substituteShift
Copyright © YourCompanyName All rights reserved
-->
<template>
  <el-dialog title="代班" v-model="isVisible" @close="handleClose" width="1000px">
    <div>
      <FormComponent :config="formConfig" :initialValues="initialValues" @submit="handleFormSubmit">
        <template #submit>
          <el-button type="warning" @click="handleReset">重置</el-button>
          <el-button type="warning" @click="handleAdd">添加</el-button>
        </template>
      </FormComponent>
    </div>
    <div>
      <el-table
        @selection-change="handleSelectionChange"
        :data="currentTableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column label="代班授权" prop="orderNumber" />
        <el-table-column label="有效天数" prop="validDays" />
        <el-table-column label="创建时间" prop="creationTime" />
        <el-table-column label="操作" />
      </el-table>
      <el-pagination
        style="margin-top: 12px"
        background
        layout="total, prev, pager, next, sizes"
        :total="tableData.length"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        v-model:current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { substituteShiftTableData, takeUpStockTableData } from '@/mock'
import { ref, watch, defineProps, defineEmits } from 'vue'
// --------------------  表单  ---------------------
const formConfig = [
  {
    label: '所属部门',
    prop: 'username',
    type: 'select',
    options: {
      placeholder: '请选择所属部门',
      style: 'width: 240px',
      options: [
        { label: '所属部门1', value: '1' },
        { label: '所属部门2', value: '2' },
        { label: '所属部门3', value: '3' },
        { label: '所属部门4', value: '4' }
      ]
    }
  },
  {
    label: '代班主管',
    prop: 'username',
    type: 'select',
    options: {
      placeholder: '请选择代班主管',
      style: 'width: 240px',
      options: [
        { label: '代班主管1', value: '1' },
        { label: '代班主管2', value: '2' },
        { label: '代班主管3', value: '3' },
        { label: '代班主管4', value: '4' }
      ]
    }
  },
  {
    label: '代班天数',
    prop: 'username',
    type: 'input',
    options: {
      placeholder: '请输入代班天数'
    }
  }
]
const initialValues = {}
const handleFormSubmit = () => {}
const handleReset = () => {}
const handleAdd = () => {}
// --------------------  表格  ---------------------
// 数据
const tableData = ref(substituteShiftTableData)
// 定义选中项数量的状态
const selectedCount = ref(0)
// 处理选择变化的函数
const handleSelectionChange = (selection: any[]) => {
  selectedCount.value = selection.length // 更新选中项的数量
}
const currentPage = ref(1)
const pageSize = ref(5)
// 计算当前页的数据
const currentTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 切换分页大小时，重置到第一页
}
const handlePageChange = (newPage) => {
  currentPage.value = newPage
}
// =========12 ====
// 定义组件的 props
interface Props {
  visible: boolean
}

// 获取 props 和 emits
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

// 局部状态变量，用于管理弹窗的可见性
const isVisible = ref<boolean>(props.visible)

// 监视 props.visible 的变化，以更新局部状态
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
    console.log(props.visible, isVisible.value, '===>props.visible')
  }
)

// 关闭弹窗的处理函数
const handleClose = () => {
  isVisible.value = false // 设置局部状态
  emit('update:visible', false) // 通知父组件
}
</script>

<style scoped>
/* 您的样式 */
</style>
